<!-- API文档 -->
<template>
  <div class="border flexStartDetween">
    <!-- API接入信息() -->
    <div class="domain width45" v-if="data.addQuery.is_multi_currency">
      <div class="flex marginB20">
        <p class="title-title" style="font-size: 21px;margin-left: 320px;">API对接配置信息</p>
      </div>
      <div class="infoBox width100">
        <div class="contentItem flexDetween textCenter" v-for="(item, index) in data.infoList" :key="index"
          v-show="item.show" style="margin-top: -1px;">
          <div class="width40">
            <el-tooltip effect="dark" placement="top">
              <template #content>{{ item.tips }}</template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </div>
          <div class="width60 colorGre" v-if="item.label == 'APP ID'">
            {{ item.value }}
          </div>
          <div class="width60 color44" v-else-if="item.label == '地区'">{{ selectToLabel(COUNTRY, item.value) }}</div>
          <div class="width60 color44 flex" v-else-if="item.label == '第三方接口域名'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" v-if="data.addQuery.is_multi_currency" size="small" type="warning"
            @click="data.isShowDetails = true">{{ item.value?'编 辑':'请输入第三方接口域名' }}</el-button>
          </div>
          <div class="width60" v-else-if="item.label == 'API接入模式'"><el-tag style="font-size: 14px;" size="large">
            {{ selectToLabel(APITYPE, item.value) }}</el-tag></div>
          <div class="width60 color44 flex" v-else-if="item.label == '秘钥'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" v-if="data.addQuery.is_multi_currency" size="small" type="warning"
              @click="data.isShowDetails = true">{{ item.value?'编 辑':'请输入秘钥' }}</el-button>
          </div>
          <div class="width60" v-else-if="item.label == '状态'"> <el-tag :type="item.value ? 'success' : 'danger'"
              style="font-size: 14px;" size="large">
              {{ selectToLabel(DEMOPLAY, item.value) }}</el-tag>
          </div>
          <div class="width60 color44" v-else-if="item.label == '创建时间'">{{ setTimestampTime(item.value as number) }}
          </div>
          <div class="width60 color44" v-else-if="item.key == 'document'">
            <el-button size="small" type="success" @click="download(data.document.englishUrl)">
              查看英文版
            </el-button>
            <el-button size="small" type="primary" @click="download(data.document.chineseUrl)">
              查看中文版
            </el-button>
          </div>
          <div class="width60 color44" v-else-if="item.key == 'password'">{{ item.value }}</div>
          <div class="width60 color44" v-else-if="item.key == 'domainAddress'">{{ data.domainAddress }}</div>
          <div class="width55Currency flexWrap" v-else-if="item.label == '货币/货币ID'" >
            <div class="width50 flex text-cut textCenter" v-for="(second, two) in item.value" :key="two" style="line-height: 30px;font-size: 16px;">
              <p class="selectWidth150 colorDark marginR5 colorRed">{{ second.label }}</p>ID：<span class="colorRed">{{ second.value }}</span>
            </div>
          </div>
          <div class="width60 color44" v-else>{{ item.value }}</div>
        </div>
      </div>
    </div>
    <!-- 域名信息 -->
    <div :class="data.addQuery.is_multi_currency?'width45':'width100'">
      <p class="title-title" v-if="!data.addQuery.is_multi_currency" style="font-size: 21px;margin-left: 320px;">API对接文档信息</p>
      <div class="infoBox " :class="data.addQuery.is_multi_currency?'marginT55 width100':'marginT20 width45'"> 
        <div class="contentItem flexDetween textCenter" v-for="(item, index) in data.domainList" :key="index"
          style="margin-top: -1px;">
          <div class="width45">
            <el-tooltip effect="dark" placement="top">
              <template #content>{{ item.tips }}</template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </div>
          <div class="width55" v-if="item.key == 'document'">
            <el-button size="small" type="success" @click="download(data.document.englishUrl)">
              查看英文版
            </el-button>
            <el-button size="small" type="primary" @click="download(data.document.chineseUrl)">
              查看中文版
            </el-button>
          </div>
          <div class="width55" v-if="item.key == 'password'">{{ item.value }}</div>
          <div class="width55" v-if="item.key == 'domainAddress'">{{ data.domainAddress }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 接入信息 -->
  <el-dialog v-model="data.isShowDetails" width="50%" title="接入信息" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="20vh">
    <el-form :model="data.addQuery" class="addQuery" ref="addQuery" :rules="data.rules" status-icon
      :validate-on-rule-change="false">
      <form-item title="API接入模式" :pass="true" value="api_type">
        <el-select v-model="data.addQuery.api_type" placeholder="请选择" disabled>
          <el-option v-for="item in APITYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span class="tipsText">({{ t('des_24') }})</span>
      </form-item>
      <form-item title="平台域名地址" value="api_url">
        <span class="box-title">{{ data.addQuery.api_url }}</span>
        <span class="tipsText">({{ t('des_22') }})</span>
      </form-item>
      <form-item title="第三方接口域名" :pass="true" value="domain_name">
        <el-input class="width320" type="text" placeholder="请输入接口域名" v-model="data.addQuery.domain_name" clearable>
          <template #prepend>https://</template>
        </el-input>
        <span class="tipsText">({{ t('des_23') }})</span>
      </form-item>
      <form-item title="秘钥" :pass="true" value="key">
        <el-input class="width320" type="text" v-model="data.addQuery.key" placeholder="请输入秘钥" clearable />
        <el-button class="marginL5" size="small" type="primary" @click="autoKey">生成秘钥</el-button>
        <span class="tipsText">({{ t('des_27') }})</span>
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onHideDetails">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { COUNTRY } from '@/config/country'
import { APITYPE, DEMOPLAY } from '@/config/eunm'
import { selectToLabel, sortsArray, setCommaNumberToArr, removeDomain, domainVerification } from '@/utils/index'
import { setTimestampTime } from '@/utils/time'
import { getOperatorInfo } from '@/api/instrument'
import { putSystemChangeOperator, postSystemFandKey } from '@/api/merchant'
import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  document: {
    id: 1,
    title: '<OMG>API对接文档',
    password: '123456',
    creat_at: '2024/03/25 15:42:00',
    chineseUrl: 'https://www.showdoc.com.cn/2485927944770828/0',
    englishUrl: 'https://www.showdoc.com.cn/2531533114615809',
    tips: ''
  },
  domainAddress: import.meta.env.VITE_DOMAIN_ADDRESS,
  loading: false,
  isShowDetails: false,
  addQuery: {
    id: 0,
    domain_name: '',
    api_url: import.meta.env.VITE_API_URL,
    is_multi_currency: 0,
    key: '',
    currency_ids: '',
    api_type: 0
  },
  rules: {
    domain_name: [{ required: true, message: '请输入', trigger: 'blur' }],
    key: [{ required: true, message: '请输入', trigger: 'blur' }],
  },
  domainList: [
    { label: '对接文档密码', key: 'password', value: 123456, tips: '对接文档密码', show: true },
    { label: '<OMG>对接文档', key: 'document', value: '', tips: '<OMG>对接文档', show: true },
    { label: '注单记录报表请求地址域名', key: 'domainAddress', value: '', tips: t('des_32'), show: true },
    { label: '玩家RTP调控功能请求域名地址', key: 'domainAddress', value: '', tips: t('des_31'), show: true },
  ],
  infoList: [
    { label: 'APP ID', key: 'app_id', value: 0, tips: t('des_21'), show: false },
    { label: '总代名称', key: 'operator_name', value: '', tips: t('des_25'), show: false },
    { label: '地区', key: 'area', value: '', tips: '商户的经营区域，可更改，创建商户时的信息设定', show: false },
    { label: '平台域名地址', key: 'api_url', value: import.meta.env.VITE_API_URL, tips: t('des_22'), show: false },
    { label: '第三方接口域名', key: 'domain_name', value: '', tips: t('des_23'), show: false },
    { label: 'API接入模式', key: 'api_type', value: 0, tips: t('des_24'), show: false },
    { label: '状态', key: 'status', value: 0, tips: t('des_26'), show: false },
    { label: '秘钥', key: 'key', value: '', tips: t('des_27'), show: false },
    { label: '创建时间', key: 'created_at', value: 0, tips: t('des_28'), show: false },
    { label: '货币/货币ID', key: 'currency_id', value: [] as any[], tips: '商户游戏结算所使用的货币，不轻易更改，创建商户时的信息设定', show: false },
  ]
})

onMounted(async () => {
  getSearchList()
})

// 查询列表
const getSearchList = async () => {
  let res = await getOperatorInfo({})
  // 处理多货币
  if (res.data.currency_ids) {
    res.data.currency_id = []
    sortsArray(setCommaNumberToArr(res.data.currency_ids), 'asc').forEach((item: number) => {
      res.data.currency_id.push({ label: selectToLabel(indexStore.currentArray, item) + '(' + selectToLabel(indexStore.currentArray, item, 'type', 'value') + ')', value: item })
    })
  }
  data.infoList.forEach((item: any) => {
    Object.keys(res.data).forEach((key: string) => {
      // 正常总代 + 总控
      if (!res.data.is_multi_currency) {
        if (item.key != 'document' && item.key != 'password' && item.key != 'domainAddress') {
          item.show = false
        } else {
          item.show = true
        }
      } else {
        item.show = true
      }
      if (key == item.key) {
        item.value = res.data[key] as any
      }
    })
  })
  res.data.domain_name=removeDomain(res.data.domain_name)
  Object.assign(data.addQuery, res.data)
}

// 生成秘钥
const autoKey = async () => {
  let res = await postSystemFandKey({})
  data.addQuery.key = res.data
}


// 保存
const addQuery = ref<FormInstance>()
const save = async () => {
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      let query = JSON.parse(JSON.stringify(data.addQuery))
      query.is_change_api = 1
      // 域名格式校验
      query.domain_name = domainVerification(query.domain_name)
      await putSystemChangeOperator(query)
      data.isShowDetails = false
      getSearchList()
      ElMessage.success('修改成功')
    }
  })
}

const download = (url: string) => {
  console.log(url)
  window.open(url, '_blank')
}

// 重置
const onHideDetails = () => {
  data.isShowDetails = false
}
</script>
<style scoped lang="scss">
.title-title {
  font-size: 18px;
  font-weight: 600;
}

.color44 {
  color: #444444;
}

.marginT55 {
  margin-top: 55px;
}

.border {
  padding: 20px 20px 40px 20px;
  background-color: #fff;
  border-radius: 15px;

  .infoBox {
    border: 1px solid #dddddd;

    .contentItem {
      margin-left: -1px;
      margin-right: -1px;
      margin-bottom: -1px;
      border: 1px solid #dddddd;
    }
    div{
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }
    .width55 {
      border-left: 1px solid #dddddd;
    }
    .width60 {
      border-left: 1px solid #dddddd;
    }
    .width55Currency{
      width: 60%;
      border-left: 1px solid #dddddd;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>